<template>
  <div class="home">
    <h1>计数:{{count}}</h1>
    <h1>翻倍:{{mul}}</h1>
    <hr>
    <h2 style="color: orange;">{{name}}</h2>
    <button @click="jiaA(2)">++(actions)</button>
    <button @click="jianA(1)">--(actions)</button>
    <button @click="jiaM(3)">++(commit)</button>
    <button @click="jianM(3)">--(commit)</button>
  </div>
</template>

<script>
  import {
    mapState,
    mapGetters,
    mapActions,
    mapMutations
  } from 'vuex'
  export default {
    name: 'HomeView',
    computed: {
      //通过mapState生成计算属性，从state中获取数据,(对象方式)
      // ...mapState({testCount:'count',testName:'name' }),
      //通过mapState生成计算属性，从state中获取数据,(数组方式)
      ...mapState('homeOption', ['count']),
      ...mapState('aboutOption', ['name']),
      //通过mapGetters生成计算属性，从getters中获取数据,(对象方式)
      // ...mapGetters({mul:'mul'})
      //通过mapGetters生成计算属性，从getters中获取数据,(数组方式)
      ...mapGetters('homeOption', ['mul'])
    },
    methods: {
      //通过mapActions生成方法，调actions中方法,(对象方式)
      // ...mapActions({add:'jiaA',decr:'jianA'})
      //通过mapActions生成方法，调actions中方法,(方式)数组
      ...mapActions('homeOption', ['jiaA', 'jianA']),

      //*************************************

      //通过mapMutations生成方法，调mutations中方法,(对象方式)
      // ...mapMutations({addM:'jiaM',decrM:'jianM'})
      //通过mapMutations生成方法，调mutations中方法,(数组方式)
      ...mapMutations('homeOption', ['jiaM', 'jianM'])
    },
    mounted() {
      console.log(this.$store)
      // console.log(mapActions({add:'jiaA',decr:'jianA'}))
    }
  }
</script>
